* {
  box-sizing: border-box;
}

.about {
  max-width: 200px;
  margin-left: 10px;
  padding: 0 10px;
  font-family: consolas, Microsoft Yahei, monospace;
  line-height: 1.4;
  border: 1px dashed #ccc;
  position: relative;
}

.about.hide {
  display: none;
}

.about .close {
  position: absolute;
  font-size: 12px;
  right: 4px;
  top: 4px;
}

.about .bold {
  font-weight: bold;
}

.screen {
  display: block;
  user-select: none;
  cursor: default;
}

.gallery .svg,
.gallery .screen {
  background: #757575;
}

.area-button {
  fill: transparent;
  cursor: pointer;
  transition: stroke 250ms;
}

.area-button:hover {
  stroke: #e91e63;
}

.text-area {
  fill: transparent;
  cursor: pointer;
}

.text-area:hover {
  fill: #865b69;
}

.text-area.selected,
.text-area:active {
  fill: #e91e63;
}

.text-area.disabled {
  fill: transparent;
  cursor: default;
}
